<!-- $Id: uiconfig.html,v 1.6 2010-01-02 09:45:14 gaudenz Exp $ Copyright (c) 2006-2010, JGraph Ltd UIConfig example for mxGraph. This example demonstrates using a config file to configure the toolbar and popup menu in mxEditor.-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
  <title>topo page</title><!-- Sets the basepath for the library if not in same directory -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <!-- Loading Stylesheets -->


  <style>
    html, body {
      font: 14px, arial, "微软雅黑";
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }

    #mynetwork {
      width: 100%;
      height: 100%;
    }

    .table {
      background: #fff;
      border: 1px solid #ccc;
    }

    .table td {
      border-left: 1px solid #ccc;
    }

    body, .site-holder {
      overflow:auto;
    }

  </style>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <![endif]-->
</head>

<script type="text/javascript">
  mxBasePath = './src';
</script>

<script type="text/javascript" src="./src/js/mxClient.js"></script>
<script type="text/javascript" src="./mxClient.js"></script>
<script type="text/javascript" src="./chainXml.js"></script>
<!-- Page passes the container for the graph to the grogram -->
<body onload=" draw(document.getElementById('graphContainer'));" style="width: 100%;height:100%;">
<div id="graphContainer" style="width: 100%;height:100%;cursor:default;position:absolute; ">
</div>
</div>

</body>

<!-- Example code -->
<script type="text/javascript">
   // Program starts here. Creates a sample graph in the// DOM node with the specified ID. This function is invoked// from the onLoad event handler of the document (see below).
  function draw(container) {
    // Checks if the browser is supported
    if (!mxClient.isBrowserSupported()) {
    // Displays an error message if the browser is not supported.
      mxUtils.error('Browser is not supported!', 200, false);
    } else {
      var model = new mxGraphModel();
      var graph = new mxGraph(container, model);
      graph.setHtmlLabels(true); //文本换行操作
      graph.setEnabled(false); //graph不可拖拽

      // Overrides method to provide a cell label in the display
      graph.convertValueToString = function(cell) {
        if (mxUtils.isNode(cell.value)) {
          if (cell.value.nodeName.toLowerCase() == 'object') {
            var labelName = cell.getAttribute('label', '');
            return labelName;
          }
        } else {
          return cell.value;
        }
      };

      var industryType = getSearchParams().industryType;
      console.log("industryType",industryType)
      var chainXml = getChainXml(industryType);
      console.log("chainXml",chainXml)
      graph.getModel().beginUpdate();
      var node = mxUtils.parseXml(chainXml);
      var dec = new mxCodec();
      dec.decode(node.documentElement, graph.getModel());
      graph.getModel().endUpdate();

      var track = new mxCellTracker(graph);
      track.mouseMove = function (sender, me) {
        var cell = this.getCell(me);
        if (cell) {
          me.getState().setCursor('pointer');
        }
      };
      graph.zoomToCenter();//居中现在和fit冲突，后续的图谱画法宽占80%以上
      //graph.fit();
      graph.centerZoom = false;//不居中放大

      graph.addListener(mxEvent.DOUBLE_CLICK, function (sender, evt) {
        var cell = evt.getProperty('cell');
        selectionChanged(graph, cell);
      });
    }
  }

  function selectionChanged(graph, cell) {
    if (cell != null) {
      return ;
    }
    var industrial;
    if (mxUtils.isNode(cell.value) && cell.value.nodeName.toLowerCase() == 'object') {
      industrial = cell.getAttribute('industrial', '');
    } else {
      industrial = cell.industrial;
    }
    if (industrial != null && industrial != '') {
      window.parent.industryDetail(industrial);
    }
  }
</script>
</html>
